<template>
	<view class="paymentTicket">
		<view class="service-icon" @click="toService">
			<button>مۇلازىم</button>
		</view>
		<view class="msg-item">
			<view class="msg-content">
				<uni-notice-bar speed="10px" scrollable single
					text="تەشۋىقات قىلىپ پۇل  تېپىش سېستىمىسى ئاسرىلۋاتىدۇ ，باشقا تۈرلەر نورمال ">
				</uni-notice-bar>
				<!-- <uni-notice-bar speed="10px" scrollable single text="二维码属专的您取获">
				</uni-notice-bar> -->
			</view>
			<view class="msg-icon">
				<image style="width: 100%;height: 100%;" src="/static/images/msg-gif.gif" mode=""></image>
			</view>
		</view>
		<view class="switchIcon">
			<view class="iconWrap" v-for="(item, index) in iconList" @click="clickType(index)">
				<view class="iconView">
					<image :class="selectIcon === index ? 'selectIcon' : 'iconImg'"
						:src="selectIcon === index ? item.selectUrl : item.url" mode="heightFix"></image>
				</view>
				<text :class="['iconTxt', selectIcon === index ? 'selectIconTxt' : ''
				]">{{item.iconText}}</text>
			</view>
		</view>
		<view class="contentBox">
			<view class="trianglePart" :style="{'left': selectLeft + 'rpx'}">
				<view class="triangle"></view>
			</view>
			<view class="cardWrap">
				<!-- 火车 -->
				<view class="trainAircraft" v-show="selectIcon === 0">
					<view class="trainAircraftTitle">
						<text class="setOut">باش نوقتا</text>
						<text class="destination">مەنزىل</text>
					</view>
					<view class="citySelect">
						<text class="setOutCity" @click="selectCity('trainSetout', 'train')">
							{{ trainSetOutCity.uyghur || pleaseSelect }}
						</text>
						<image class="icon" src="/static/images/transposition.png" mode="" @click="switchTrainCity">
						</image>
						<text class="destinationCity" @click="selectCity('trainDest', 'train')">
							{{ trainDestCity.uyghur || pleaseSelect }}
						</text>
					</view>
					<view class="setOutTime" @click="open">
						<image class="calendarIcon" src="/static/images/calendar.png" mode=""></image>
						<view class="time">
							<view class="timeWeek">
								ئەتە
							</view>
							<view class="timeDay rtl">
								{{trainTime.month}}-ئاينىڭ {{trainTime.day}}-كۈنى
							</view>
						</view>
					</view>
				</view>
				<!-- 飞机 -->
				<view class="trainAircraft" v-show="selectIcon === 1">
					<view class="trainAircraftTitle">
						<text class="setOut">باش نوقتا</text>
						<text class="destination">مەنزىل</text>
					</view>
					<view class="citySelect">
						<text class="setOutCity" @click="selectCity('airSetOut', 'airPort')">
							{{ airSetOutCity.uyghur || pleaseSelect }}
						</text>
						<image class="icon" src="/static/images/aircraftIcon.png" mode="" @click="switchAirCity">
						</image>
						<text class="destinationCity" @click="selectCity('airDest', 'airPort')">
							{{ airDestCity.uyghur || pleaseSelect }}</text>
					</view>
					<view class="setOutTime" @click="open">
						<image class="calendarIcon" src="/static/images/calendar.png" mode=""></image>
						<view class="time">
							<view class="timeWeek">
								ئەتە
							</view>
							<view class="timeDay rtl">
								{{airticketTime.month}}-ئاينىڭ {{airticketTime.day}}-كۈنى
							</view>
						</view>
					</view>
				</view>
				<!-- 违章代缴 -->
				<view class="currency" v-show="selectIcon === 2">
					<view class="currencyTitle">
						<!-- 违章单号 -->
						تالون نۇمۇرى
					</view>
					<!-- 违章单号输入框 -->
					<input class="currencyInput" type="text" @blur="() => {
							if (!this.violationsVal) {
								this.violationsShow = false
							}
						}" @input="clickInput" adjust-position="false" :focus="true" v-if="violationsShow" />
					<view style="color: #CDCDCD;box-sizing: content-box;" class="currencyInput"
						@click="this.violationsShow = true" v-else>
						تالون نۇمۇرىنى كىرگۈزۈڭ
					</view>
					<!-- 违章单号是什么 -->
					<view class="currencyBtm">
						<!-- 错误 提示 -->
						<view class="tips" v-if="violationsErrorShow">
							{{violationsErrorMsg}}
						</view>
						<view class="violations" :style="{paddingTop: violationsErrorShow ? '8rpx' : '28rpx'}"
							@click="showImg">
							<image class="violationsIcon" src="/static/images/tishi.png" mode=""></image>
							<text class="violationsTxt">قاتناش جەرىمانە نۇمۇرى دىگەن نىمە؟</text>
						</view>
					</view>
				</view>
				<!-- 电费 -->
				<view class="currency" v-show="selectIcon === 3">
					<view class="currencyTitle">
						كارتا نۇمۇرى
					</view>
					<!-- 输入电卡号 -->
					<input class="currencyInput" type="text" @blur="() => {
							if (!this.electricityVal) {
								this.electricityShow = false
							}
						}" @input="clickInput" adjust-position="false" :focus="true" v-if="electricityShow" />
					<view style="color: #CDCDCD;box-sizing: content-box;" class="currencyInput"
						@click="this.electricityShow = true" v-else>
						كارتا نۇمۇرىنى كىرگۈزۈڭ
					</view>
					<!-- 查询区域 -->
					<view class="currencyBtm">
						<!-- 错误 提示 -->
						<view class="tips" v-if="electricityErrorShow">
							{{electricityErrorMsg}}
						</view>
						<!-- 进度条 -->
						<view class="progress" v-if="electricityLoading">
							<view class="progressBar">
								<view class="complete" :style="{'width': electricityProgress + '%'}">
									<view class="dian"></view>
								</view>
							</view>
							<view class="progressInfo">
								<view class="infotext">
									تەكشۈرۋاتىدۇ ،سەل ساقلاڭ
								</view>
								<view class="progressNum">
									{{electricityProgress}}%
								</view>
							</view>
						</view>
						<!-- 查询按钮 -->
						<button v-if="!queryStatus && electricityVal && !electricityLoading" class="checkBalance"
							type="default" @click="lookBalance">قالدۇق تەكشۈرۈش</button>
						<!-- 查询结果 -->
						<view v-if="queryStatus && !electricityLoading" class="checkResult">
							<view class="resultTitle">
								<text class="resultTitleTxt">تەكشۈرۈش نەتىجىسى</text>
								<image class="closeResult" src="/static/images/close.png" mode="" @click="closeBalance">
								</image>
							</view>
							<view class="resultInfo">
								<view class="resultInfoItem">
									<view class="itemLabel">
										ئىسىم فامىلىسى
									</view>
									<view class="itemVal">
										{{power_user_name}}
									</view>
								</view>
								<view class="resultInfoItem">
									<view class="itemLabel">
										قالدۇق
									</view>
									<view class="itemVal">
										¥{{power_user_balance}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 交话费 -->
				<view class="currency" v-show="selectIcon === 4">
					<view class="currencyTitle">
						<!-- 电话号 -->
						تىلفۇن ھەققى
					</view>
					<!-- 解决input框字体问题 -->
					<input class="currencyInput" type="text" @blur="() => {
							if (!this.telephoneVal) {
								this.telephoneShow = false
							}
						}" @input="clickInput" adjust-position="false" :focus="true" v-if="telephoneShow" />
					<view style="color: #CDCDCD;box-sizing: content-box;" class="currencyInput"
						@click="this.telephoneShow = true" v-else>
						تىلفۇن نۇمۇرىنى كىرگۈزۈڭ
					</view>
					<!-- 查余额区域 -->
					<view class="currencyBtm">
						<!-- 错误 提示 -->
						<view class="tips" v-if="phoneErrorShow">
							{{phoneErrorMsg}}
						</view>
						<!-- 进度条 -->
						<view class="progress" v-if="telephoneLoading">
							<view class="progressBar">
								<view class="complete" :style="{'width': telephoneProgress + '%'}">
									<view class="dian"></view>
								</view>
							</view>
							<view class="progressInfo">
								<view class="infotext">
									تەكشۈرۋاتىدۇ ،سەل ساقلاڭ
								</view>
								<view class="progressNum">
									{{telephoneProgress}}%
								</view>
							</view>
						</view>
						<!-- 查余额按钮 -->
						<button v-if="!phoneQueryStatus && telephoneVal && !telephoneLoading" class="checkBalance"
							type="default" @click="lookBalance">قالدۇق تەكشۈرۈش</button>
						<!-- 查余额结果 -->
						<view v-if="phoneQueryStatus && !telephoneLoading" class="checkResult">
							<view class="resultTitle">
								<text class="resultTitleTxt">تەكشۈرۈش نەتىجىسى</text>
								<image class="closeResult" src="/static/images/close.png" mode="" @click="closeBalance">
								</image>

							</view>
							<view class="resultInfo">
								<view class="resultInfoItem">
									<view class="itemLabel">
										ئىسىم فامىلىسى
									</view>
									<view class="itemVal">
									</view>
								</view>
								<view class="resultInfoItem">
									<view class="itemLabel">
										قالدۇق
									</view>
									<view class="itemVal">
										¥{{phoneBalance.split(':').join('')}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 车票选择区域 -->
		<view class="selectWrap" v-if="selectIcon === 0">
			<view class="selectItem">
				<image class="selectIcon" v-if="!trainSelect.isSelectStudent" src="/static/images/yuan.png" mode="">
				</image>
				<image class="selectIcon" v-if="trainSelect.isSelectStudent" src="/static/images/selectYuan.png"
					mode=""></image>
				<view class="text">ئوقوغۇچىلار بىلىتى</view>
			</view>
		</view>
		<!-- 机票选择区域 -->
		<view class="selectWrap" v-if="selectIcon === 1">
			<view class="selectItem">
				<image class="selectIcon" v-if="!trainSelect.isSelectStudent" src="/static/images/yuan.png" mode="">
				</image>
				<image class="selectIcon" v-if="trainSelect.isSelectStudent" src="/static/images/selectYuan.png"
					mode=""></image>
				<view class="text">بالا بار<text class="textDetails">2ياشتىن 12 ياشقىچە</text></view>
			</view>
			<view class="selectItem">
				<image class="selectIcon" v-if="!trainSelect.isSelectType" src="/static/images/yuan.png" mode="">
				</image>
				<image class="selectIcon" v-if="trainSelect.isSelectType" src="/static/images/selectYuan.png" mode="">
				</image>
				<view class="text">بۇۋاق بار<text class="textDetails">14كۈنلۈكتىن 2ياشقىچە</text></view>
			</view>
		</view>
		<!-- 提交按钮 -->
		<button class="subBtn" type="default" @click="subFn">
			{{ getSubBtnText }}
		</button>
		<!-- 升级代理弹框 -->
		<view v-if="isShowModal">
			<view class="modalMask" @click="() => {this.isShowModal = false}"></view>
			<view class="modalView">
				<image class="icon" src="/static/images/tishi-icon.png" mode="widthFix"></image>
				<view class="modalTitle">
					مەغلۇپ بولدى
				</view>
				<view class="modalContent">
					سىز تېخى ۋاكالەتچى ئەمەس ، بۇ تۈرلەردىن بەھىرلىنەلمەيسىز ،ۋاكالەتچىلىكنى تىز ئاچۇرۋېلىڭ
				</view>
				<view class="btm">
					<view class="cancel" @click="() => {this.isShowModal = false}">ئاچۇرمايمەن</view>
					<view class="determine" @click="() => {
							this.isShowModal = false;
							this.toVip();
						}">ئاچۇرمەن</view>
				</view>
			</view>
		</view>
		<uni-calendar v-if="isShowCalendar" ref="calendar" :insert="false" @confirm="selectTime" :date="dateVal" />
	</view>
</template>

<script>
	import dayjs from '../../../../libs/_dayjs.min'
	import {
		toLogin
	} from "@/libs/login.js";
	import {
		mapGetters,
		mapState,
	} from "vuex";
	import {
		electricQuery,
		telephoneQuery,
		violationQuery,
		teleflowDenomination
	} from '@/api/dailyLife.js'

	const now = dayjs().toObject()
	const P = (num) => num > 9 ? num + '' : `0${num}`
	const nowObject = {
		year: now.years,
		month: P(now.months + 1),
		day: P(now.date)
	}
	export default {
		data() {
			return {
				// 电费
				power_user_name: '', // 电费用户名
				power_user_balance: 0, // 电费金额

				queryStatus: false,
				phoneQueryStatus: false,
				electricityVal: '',
				telephoneVal: '',
				selectIcon: 0,

				// 火车出发城市
				trainSetOutCity: {
					name: undefined
				},
				// 火车抵达城市
				trainDestCity: {
					name: undefined
				},
				// 飞机出发城市
				airSetOutCity: {
					name: undefined
				},
				// 飞机抵达城市
				airDestCity: {
					name: undefined
				},

				trainSelect: {
					isSelectStudent: true,
					isSelectType: false,
				},
				iconList: [{
						url: '/static/images/trainTickets.png',
						selectUrl: '/static/images/selectTrainTickets.png',
						iconText: this.$i18n['火车票'],
					},
					{
						url: '/static/images/aircraft.png',
						selectUrl: '/static/images/selectAircraft.png',
						iconText: this.$i18n['机票'],
					},
					{
						url: '/static/images/violations.png',
						selectUrl: '/static/images/selectViolations.png',
						iconText: this.$i18n['违章代缴'],
					},
					{
						url: '/static/images/electricity.png',
						selectUrl: '/static/images/selectElectricity.png',
						iconText: this.$i18n['电费'],
					},
					{
						url: '/static/images/telephone.png',
						selectUrl: '/static/images/selectTelephone.png',
						iconText: this.$i18n['交话费'],
					},
				],
				violationsShow: false,
				violationsVal: '',
				electricityShow: false,
				telephoneShow: false,
				isShowModal: false,
				telephoneLoading: false,
				telephoneProgress: 0,
				electricityLoading: false,
				electricityProgress: 0,
				trainTime: nowObject,
				airticketTime: nowObject,
				dateVal: '',
				isShowCalendar: false,
				// 手机号查询数据
				phoneBalance: 0,
				// 手机号错误处理
				phoneErrorMsg: '',
				phoneErrorShow: false,
				// 电费错误处理
				electricityErrorMsg: '',
				electricityErrorShow: false,
				// 违章错误处理
				violationsErrorMsg: '',
				violationsErrorShow: false,
				// 请选择
				pleaseSelect: this.$i18n['请选择']
			};
		},
		computed: {
			...mapState({
				currentCity: (state) => {
					return state?.app?.currentCity;
				},
				citySelectContext: (state) => {
					return state?.app?.citySelectContext;
				},
			}),
			...mapGetters({
				isLogin: 'isLogin'
			}),
			selectLeft() {
				return Number(this.selectIcon) * 137 + 60;
			},
			getSubBtnText() {
				let text = ''
				// 火车
				if (this.selectIcon === 0) {
					text = 'بىلەت تەكشۈرۈش'
				}
				// 机票
				if (this.selectIcon === 1) {
					text = 'ئايرىپىلان بىلەت تەكشۈرۈش'
				}
				// 违章
				if (this.selectIcon === 2) {
					text = 'جەرىمانە تۈلەش'
				}
				// 电费
				if (this.selectIcon === 3) {
					text = 'توك پۇلى قاچىلاش'
				}
				// 话费
				if (this.selectIcon === 4) {
					text = 'تىلفۇن ھەققى قاچىلاش'
				}
				return text
			}
		},
		watch: {
			// 监听城市选择结果的变化，根据 citySelectContext 填充到对应的位置
			currentCity: {
				handler(newV) {
					console.log('newV', newV)
					if (this.citySelectContext === 'trainSetout') {
						// 当前选择的城市应该是火车出发城市
						this.trainSetOutCity = newV
					} else if (this.citySelectContext === 'trainDest') {
						// 当前选择的城市应该是火车抵达城市
						this.trainDestCity = newV
					} else if (this.citySelectContext === 'airSetOut') {
						// 当前选择的城市应该是火车抵达城市
						this.airSetOutCity = newV
					} else if (this.citySelectContext === 'airDest') {
						// 当前选择的城市应该是火车抵达城市
						this.airDestCity = newV
					}
				},
				immediate: true,
			},
		},
		methods: {
			toService() {
				wx.openCustomerServiceChat({
					extInfo: {
						url: 'https://work.weixin.qq.com/kfid/kfc76df49697b975961',
					},
					corpId: 'wwa55ec68f9a2db053',
					success(res) {}
				})
			},
			// 对调火车的出发抵达城市
			switchTrainCity() {
				const t = {
					...this.trainSetOutCity
				};
				this.trainSetOutCity = this.trainDestCity
				this.trainDestCity = t;
			},
			switchAirCity() {
				const t = {
					...this.airSetOutCity
				};
				this.airSetOutCity = {
					...this.airDestCity
				}
				this.airDestCity = t;
			},

			//
			// 解析这个文件: https://kyfw.12306.cn/otn/resources/js/framework/station_name.js
			// 返回车站名称与车站编码的映射, 比如 { "长春南": "CET" }
			parseStationName(text) {
				const stations = {}
				text.split('@').slice(1).forEach((item) => {
					const t = item.split('|');
					// 车站名称与车站编码的映射
					stations[t[1]] = t[2];
				});
				return stations;
			},

			// 根据场景选择城市
			selectCity(context, type) {
				// if (type === 'airPort') {
				// 	this.maintainFn()
				// 	return
				// }
				// return this.maintainFn()
				this.$store.commit('SET_CITY_SELECT_CONTEXT', context);
				// 跳转到城市选择页面
				this.toCity(type);
			},
			// 跳转到城市
			toCity(type) {
				// return this.maintainFn()
				if (type === 'train') {
					uni.navigateTo({
						url: '/pages/dailyLife/choose_city/index?type=' + type
					})
				} else {
					uni.navigateTo({
						url: '/pages/dailyLife/choose_air/index?type=' + type
					})
				}
			},
			// 点击切换
			clickType(index) {
				// if (index === 2) {
				// 	this.isShowModal = true
				// };
				this.selectIcon = index;
				this.$nextTick(() => {
					setTimeout(() => {
						this.isShowCalendar = false;
					})
				})
			},
			// 点击input
			clickInput(e) {
				let val = e.detail.value;
				if (this.selectIcon === 2) {
					// 输入违章单号
					this.violationsVal = val
					if (val === '') {
						this.violationsErrorShow = false;
					}
				} else if (this.selectIcon === 3) {
					// 输入电卡号
					this.electricityVal = val;
					if (val === '') {
						this.electricityErrorShow = false;
					}
				} else if (this.selectIcon === 4) {
					// 输入手机号
					this.telephoneVal = val;
					if (val === '') {
						this.phoneErrorShow = false;
					}
				}
			},
			// 查看余额
			async lookBalance() {
				let that = this;
				if (that.isLogin == false) {
					toLogin()
					return;
				}
				if (this.selectIcon === 3) {
					// 电卡号
					this.electricityLoading = true;
					this.numAdd('electricityProgress'); // 进度条自增
					const resData = await electricQuery({
						number: this.electricityVal
					});

					if (resData.code === 1) {
						this.queryStatus = true; // 查询成功显示结果
						this.power_user_balance = resData.data.balance;
						this.power_user_name = resData.data.userName;
						this.electricityErrorShow = false;
						this.electricityErrorMsg = '';
					} else {
						// 失败展示错误区域
						this.queryStatus = false;
						this.electricityErrorShow = true;
						this.electricityErrorMsg = resData.msg;
					}
					// 恢复进度
					setTimeout(() => {
						that.electricityLoading = false;
						that.electricityProgress = 0;
					}, 250)

				} else if (this.selectIcon === 4) {
					if (this.telephoneVal.length !== 11) {
						this.phoneQueryStatus = false;
						this.phoneErrorShow = true;
						this.phoneErrorMsg = this.$i18n['请输入正确的手机号！'];
						return;
					}
					this.telephoneLoading = true;
					// 手机号
					this.numAdd('telephoneProgress');
					let resData = await telephoneQuery({
						number: this.telephoneVal
					});
					if (resData.code === 1) {
						this.phoneQueryStatus = true; // 查询成功显示结果
						this.phoneBalance = resData.data.balance;
					} else {
						// 失败展示错误区域
						this.phoneQueryStatus = false;
						this.phoneErrorShow = true;
						this.phoneErrorMsg = resData.msg;
					}
					setTimeout(() => {
						that.telephoneLoading = false;
						that.telephoneProgress = 0;
					}, 250)
				}
			},

			// 进度条递增
			numAdd(name) {
				let that = this;
				let timer = setInterval(() => {
					that[name] = that[name] + 3;
					if (that[name] > 98) {
						clearInterval(timer)
					}
				}, 10)
			},
			// 关闭查询
			closeBalance() {
				if (this.selectIcon === 3) {
					// 电卡号
					this.queryStatus = false;
				} else if (this.selectIcon === 4) {
					// 手机号
					this.phoneQueryStatus = false;
				}
			},

			// 远程获取火车票信息
			async fetchTrainTicketInfo() {
				// uni.request({
				//   url: 'https://kyfw.12306.cn/otn/resources/js/framework/station_name.js'
				// });
				return await uni.request({
					url: 'https://xcx.arzanbaza.cn/api/Train/Query',
					method: 'POST',
					data: {
						from_code: fromCode,
						to_code: toCode,
						start_date: '2022-09-03'
					},
				});
			},

			// 提交
			async subFn() {

				let that = this;
				if (that.isLogin == false) {
					toLogin()
					return;
				}
				if (this.selectIcon === 0) {
					console.log('this.trainSetOutCity', this.trainSetOutCity)
					console.log('this.trainSetOutCity', this.trainDestCity)
					// return this.maintainFn()
					// 出发车站编码
					const fromName = this.trainSetOutCity.uyghur
					const fromCode = this.trainSetOutCity.code;

					// 抵达车站编码
					const toName = this.trainDestCity.uyghur
					const toCode = this.trainDestCity.code;
					// 跳转车站列表
					if (fromCode && toCode) {
						const {
							year,
							month,
							day
						} = this.trainTime
						const startDate = `${year}-${month}-${day}`
						uni.navigateTo({
							url: `/pages/dailyLife/train_ticket/index?from_code=${fromCode}&from_name=${fromName}&to_name=${toName}&to_code=${toCode}&start_date=${startDate}`
						})
					} else {
						uni.showToast({
							title: 'باش نوقتا بىلەن مەنزىلنى تاللاڭ',
							icon: 'none',
							duration: 2000
						})
					}
				} else if (this.selectIcon === 1) {

					// this.maintainFn()					// 	return
					// uni.requestSubscribeMessage({
					// 	tmplIds: ['jo2cHpU0mMGgZ4G4aDRB6zvvV1MiqOejsbrv1Bfrh0w'],
					// 	success (res) {
					// 		console.log('res', res)
					// 	},
					// 	fail (e) {
					// 		console.log('e', e)
					// 	}
					// })
					// return;
					// 机票
					console.log('this.airSetOutCity', this.airSetOutCity)
					console.log('this.airDestCity', this.airDestCity)
					// return this.maintainFn()
					// 出发车站编码
					const fromName = this.airSetOutCity.uyghur
					const fromCode = this.airSetOutCity.code;

					// 抵达车站编码
					const toName = this.airDestCity.uyghur
					const toCode = this.airDestCity.code;
					const {
						year,
						month,
						day
					} = this.airticketTime
					const startDate = `${year}-${month}-${day}`
					// 跳转车站列表
					if (fromCode && toCode) {
						console.log('startDate', startDate)
						uni.navigateTo({
							url: `/pages/dailyLife/airticket_list/index?from_code=${fromCode}&from_name=${fromName}&to_name=${toName}&to_code=${toCode}&start_date=${startDate}`
						})
					} else {
						uni.navigateTo({
							url: `/pages/dailyLife/airticket_list/index?from_code=${fromCode}&from_name=${fromName}&to_name=${toName}&to_code=${toCode}&start_date=${startDate}`
						})
						uni.showToast({
							icon: 'none',
							title: 'باش نوقتا بىلەن مەنزىلنى تاللاڭ',
						})
					}

				} else if (this.selectIcon === 2) {
					if (this.violationsVal.length == 0) {
						uni.showModal({
							title: that.$i18n['提示'],
							content: that.$i18n['您还没有输入违章单号'],
							showCancel: false,
							confirmText: that.$i18n['确认']
						});
						return;
					}
					let reg = /^[0-9xX]{15,16}$/;
					if (reg.test(this.violationsVal) === false) {
						// 失败展示错误区域
						this.violationsErrorShow = true;
						this.violationsErrorMsg = this.$i18n['请输入正确的违章单号！'];
						return;
					}
					uni.showLoading({
						title: ''
					});
					const resData = await violationQuery({
						fineNum: this.violationsVal
					});
					if (resData.code === 1) {
						this.violationsErrorShow = false;
						this.violationsErrorMsg = '';
						uni.requestSubscribeMessage({
							tmplIds: ['jR9kVtNRoCkVBddplpiskkYEkRLLgimgBkAA6UXWSVA',
								'wm6XFuTOqr1blbKu3JKLJX7GLczxQ9q5ok3_iJtMoRU',
								'12XtrqseAR0UgBNabDZhGiFxeCfdR2JrlAVc0XePsmI'
							],
							success(res) {
								console.log('res', res)
							},
							fail(e) {
								console.log('e', e)
							},
							complete(e) {
								// 违章代缴
								uni.navigateTo({
									url: `/pages/dailyLife/violations/index?number=${that.violationsVal}&resData=${JSON.stringify(resData)}`
								})
							}
						})
					} else {
						// 失败展示错误区域
						this.violationsErrorShow = true;
						this.violationsErrorMsg = resData.msg;
					}
					uni.hideLoading();
				} else if (this.selectIcon === 3) {
					if (this.electricityVal.length == 0) {
						uni.showModal({
							title: that.$i18n['提示'],
							content: that.$i18n['请您输入卡号再进行操作'],
							showCancel: false,
							confirmText: that.$i18n['确认']
						});
						return;
					}
					if (this.electricityVal.length < 10 || this.electricityVal.length > 11) {
						// 失败展示错误区域
						this.queryStatus = false;
						this.electricityErrorShow = true;
						this.electricityErrorMsg = this.$i18n['你输入的电卡号无效！'];
						return;
					}
					uni.showLoading({
						title: ''
					});
					const resData = await electricQuery({
						number: this.electricityVal
					});
					if (resData.code === 1) {
						uni.requestSubscribeMessage({
							tmplIds: ['jR9kVtNRoCkVBddplpiskkYEkRLLgimgBkAA6UXWSVA',
								'wm6XFuTOqr1blbKu3JKLJX7GLczxQ9q5ok3_iJtMoRU',
								'12XtrqseAR0UgBNabDZhGiFxeCfdR2JrlAVc0XePsmI'
							],
							success(res) {
								console.log('res', res)
							},
							fail(e) {
								console.log('e', e)
							},
							complete(e) {
								// 电费
								uni.navigateTo({
									url: `/pages/dailyLife/electricity/index?number=${that.electricityVal}`
								})
							}
						})
					} else {
						// 失败展示错误区域
						this.queryStatus = false;
						this.electricityErrorShow = true;
						this.electricityErrorMsg = resData.msg;
					}
					uni.hideLoading();
				} else if (this.selectIcon === 4) {
					if (this.telephoneVal.length == 0) {
						uni.showModal({
							title: that.$i18n['提示'],
							content: that.$i18n['请输入您要缴费的手机号'],
							showCancel: false,
							confirmText: that.$i18n['确认']
						});
						return;
					}
					if (this.telephoneVal.length !== 11) {
						this.phoneQueryStatus = false;
						this.phoneErrorShow = true;
						this.phoneErrorMsg = this.$i18n['请输入正确的手机号！'];
						return;
					}

					uni.showLoading({
						title: ''
					});
					// 根据查询面额接口判断是否手机号正确
					let resData = await teleflowDenomination({
						number: this.telephoneVal
					});
					if (resData.code === 1) {
						uni.requestSubscribeMessage({
							tmplIds: ['jR9kVtNRoCkVBddplpiskkYEkRLLgimgBkAA6UXWSVA',
								'wm6XFuTOqr1blbKu3JKLJX7GLczxQ9q5ok3_iJtMoRU',
								'12XtrqseAR0UgBNabDZhGiFxeCfdR2JrlAVc0XePsmI'
							],
							success(res) {
								console.log('res', res)
							},
							fail(e) {
								console.log('e', e)
							},
							complete(e) {
								// 手机号
								uni.navigateTo({
									url: `/pages/dailyLife/telephone/index?number=${that.telephoneVal}`
								})
							}
						})
					} else {
						// 失败展示错误区域
						this.phoneQueryStatus = false;
						this.phoneErrorShow = true;
						this.phoneErrorMsg = this.$i18n['请输入正确的手机号！'];
					}
					uni.hideLoading();
				}
			},
			// 跳转到升级代理
			toVip() {
				uni.navigateTo({
					url: '/pages/users/agencyCenter/index'
				})
			},

			open() {
				if (this.selectIcon === 0) {
					// 车票
					console.log('车票a', `${this.trainTime.year}-${this.trainTime.month}-${this.trainTime.day}`)
					this.dateVal = `${this.trainTime.year}-${this.trainTime.month}-${this.trainTime.day}`
				} else if (this.selectIcon === 1) {
					// 机票
					this.dateVal = `${this.airticketTime.year}-${this.airticketTime.month}-${this.airticketTime.day}`
				}
				this.isShowCalendar = true
				var that = this;
				this.$nextTick(() => {
					setTimeout(() => {
						that.$refs.calendar.open();
					}, 0)
				})
			},

			selectTime(e) {
				console.log(e);
				let tiemArr = e.fulldate.split('-');
				let year = tiemArr[0];
				let month = tiemArr[1];
				let day = tiemArr[2];
				if (this.selectIcon === 0) {
					// 车票
					this.trainTime = {
						year,
						month,
						day
					}
				} else if (this.selectIcon === 1) {
					// 机票
					this.airticketTime = {
						year,
						month,
						day
					}
				}
				this.$nextTick(() => {
					setTimeout(() => {
						this.isShowCalendar = false;
					}, 300)
				})
			},
			showImg() {
				// 预览图片
				uni.previewImage({
					current: 'https://xcx.azanbazar.com/statics/images/traffic.jpg',
					urls: ['https://xcx.azanbazar.com/statics/images/traffic.jpg']
				});
			},
			maintainFn() {
				let that = this;
				uni.showModal({
					title: that.$i18n['提示'],
					content: that.$i18n['正在开发中，过几天发布'],
					showCancel: false,
					confirmText: that.$i18n['确认']
				});
			}
		}
	}
</script>

<style lang="scss">
	.paymentTicket {
		.service-icon {
			button {
				background-color: transparent !important;
				color: #333333 !important;
				font-size: 24rpx !important;
			}

			display: flex;
			align-items: center;
			justify-content: center;
			font-family: msyhfont;
			position: fixed;
			left: 20rpx;
			top: 50vh;
			z-index: 99;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			background-image: url('@/static/images/serves.png');
			width: 108rpx;
			height: 108rpx;
			text-align: center;
			font-size: 24rpx;
			font-weight: 400;
			color: #333333;
		}

		.msg-item {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			background-color: #FFF9EA;

			.msg-content {
				flex-grow: 1;
			}

			.msg-icon {
				flex-shrink: 0;
				width: 42rpx;
				height: 42rpx;
			}
		}

		.switchIcon {
			display: flex;
			justify-content: space-between;
			padding: 0 48rpx;

			.iconWrap {
				width: 102rpx;
				text-align: center;

				.iconView {
					width: 102rpx;
					height: 102rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-bottom: 10rpx;
				}

				.iconImg {
					height: 60rpx;
				}

				.selectIcon {
					width: 102rpx;
					height: 102rpx;
				}

				.iconTxt {
					height: 28rpx;
					font-size: 18rpx;
					font-weight: 400;
					color: #333333;
					line-height: 28rpx;
					white-space: nowrap;
				}

				.selectIconTxt {
					font-size: 20rpx;
					font-weight: 500;
				}
			}
		}

		.contentBox {
			width: 690rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			box-shadow: 0px 2px 20px 0px rgba(179, 175, 175, 0.2000);
			margin: 48rpx 30rpx 0;
			position: relative;


			/*钝角三角形*/
			.trianglePart {
				position: absolute;
				top: -116rpx;
				left: 60rpx;
				z-index: 1;

				.triangle {
					width: 60rpx;
					height: 180rpx;
					overflow: hidden;
					position: relative;
					transform: rotate(90deg);

					&:after {
						content: '';
						width: 100rpx;
						height: 100rpx;
						position: absolute;
						transform: scaleY(1.1) translate(30%, -60rpx) rotate(45deg);
					}


					&:after {
						left: 14rpx;
						top: 120rpx;
						border-radius: 16rpx;
						background-color: #fff;
					}
				}
			}

			.cardWrap {
				.trainAircraft {
					padding: 40rpx 30rpx 0;

					.trainAircraftTitle {
						display: flex;
						justify-content: space-between;
						padding: 0 90rpx;

						.setOut,
						.setOut {
							height: 26rpx;
							font-size: 26rpx;
							font-weight: 400;
							color: #999999;
							line-height: 26rpx;
						}
					}

					.citySelect {
						display: flex;
						margin-top: 40rpx;
						justify-content: space-between;
						padding: 0 42rpx;

						.icon {
							width: 56rpx;
							height: 56rpx;
						}

						.setOutCity,
						.destinationCity {
							height: 44rpx;
							font-size: 44rpx;
							font-weight: 500;
							color: #333333;
							line-height: 44rpx;
						}
					}

					.setOutTime {
						padding: 0 44rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						border-top: 1px solid #F1F1F1;
						margin-top: 50rpx;
						height: 166rpx;

						.calendarIcon {
							width: 56rpx;
							height: 56rpx;
							margin-left: 58rpx;
						}

						.time {
							text-align: center;

							.timeWeek {
								height: 44rpx;
								font-size: 30rpx;
								font-weight: 400;
								color: #999999;
								line-height: 44rpx;
							}

							.timeDay {
								margin-top: 10rpx;
								height: 44rpx;
								font-size: 42rpx;
								font-weight: bold;
								color: #333333;
								line-height: 44rpx;
							}
						}
					}
				}

				.currency {
					padding: 0 30rpx;

					.currencyTitle {
						padding: 40rpx 0;
						height: 40rpx;
						font-size: 32rpx;
						font-weight: 500;
						color: #333333;
						line-height: 40rpx;
						margin-bottom: 12rpx;
					}

					.currencyInput {
						height: 108rpx;
						line-height: 108rpx;
						font-size: 52rpx;
						font-weight: 500;
						color: #333333;
						border-bottom: 1px solid #F1F1F1;
					}

					.currencyBtm {
						min-height: 120rpx;
					}

					.tips {
						line-height: 28rpx;
						color: red;
						padding-top: 10rpx;
					}

					.violations {
						display: flex;
						justify-content: flex-end;
						align-items: flex-start;

						.violationsIcon {
							width: 24rpx;
							height: 24rpx;
							margin-top: 6rpx;
							margin-right: 10rpx;
						}

						.violationsTxt {
							height: 32rpx;
							font-size: 24rpx;
							font-weight: 400;
							color: #FED04C;
						}
					}

					.checkBalance {
						display: inline-block;
						margin-top: 28rpx;
						height: 60rpx;
						padding: 0 40rpx;
						line-height: 60rpx;
						background: #FDD04C;
						border-radius: 31px;
						border-radius: 31rpx;
						font-size: 26rpx;
						text-align: center;
						font-weight: 400;
						color: #333333;
					}

					.checkResult {
						padding-top: 24rpx;
						padding-bottom: 48rpx;

						.resultTitle {
							display: flex;
							justify-content: space-between;
							align-items: center;

							.resultTitleTxt {
								height: 24rpx;
								font-size: 24rpx;
								font-weight: 400;
								color: #999999;
								line-height: 24rpx;
							}

							.closeResult {
								width: 24rpx;
								height: 24rpx;
							}
						}

						.resultInfo {
							margin-top: 10rpx;
							color: #333;
							display: flex;
							line-height: 28rpx;
							font-size: 28rpx;
							font-weight: 500;
							color: #333333;
							flex-wrap: wrap;

							.resultInfoItem {
								display: flex;
								align-items: center;
								margin-right: 62rpx;
								padding-top: 20rpx;

								.itemLabel {
									margin-right: 20rpx;
								}
							}
						}
					}

					.progress {
						padding-top: 30rpx;

						.progressBar {
							width: 630rpx;
							height: 36rpx;
							background: #FDF1D1;
							border-radius: 37px;

							.complete {
								width: 348rpx;
								height: 36rpx;
								background: linear-gradient(180deg, #FF8A52 0%, #E9550E 100%);
								border-radius: 37rpx;

								.dian {
									width: 8rpx;
									height: 8rpx;
									background: #FFFFFF;
									border-radius: 50%;
									position: relative;
									right: 16rpx;
									top: 14rpx;
									z-index: 99;
								}
							}
						}

						.progressInfo {
							margin-top: 24rpx;
							padding-bottom: 30rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;

							.infotext {
								line-height: 24rpx;
								font-size: 24rpx;
								font-weight: 400;
								color: #666666;
							}

							.progressNum {
								line-height: 32rpx;
								font-size: 32rpx;
								font-weight: 600;
								color: #FDCF4A;
							}
						}
					}
				}
			}
		}

		.selectWrap {
			padding: 4rpx 30rpx 0;
			text-align: right;

			.selectItem {
				display: flex;
				justify-content: flex-end;
				margin-top: 22rpx;

				.selectIcon {
					width: 24rpx;
					height: 24rpx;
					margin-right: 10rpx;
					margin-top: 6rpx;
				}

				.jiantouIcon {
					width: 12rpx;
					height: 20rpx;
					margin-right: 14rpx;
					margin-top: 6rpx;
				}

				.text {
					font-size: 24rpx;
				}

				.textDetails {
					height: 20rpx;
					font-size: 20rpx;
					font-weight: 400;
					color: #999999;
					line-height: 20rpx;
					margin-right: 8rpx;
				}
			}
		}

		.subBtn {
			width: 690rpx;
			height: 108rpx;
			line-height: 108rpx;
			background: linear-gradient(270deg, #FCCF49 0%, #FFCD54 100%);
			border-radius: 54rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #333333;
			margin: 50rpx auto 0rpx;
		}

		.modalMask {
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 999;
			width: 100vw;
			height: 100vh;
			background: #333333;
			opacity: 0.5;
		}

		.modalView {
			width: 100%;
			background: #FFFFFF;
			border-radius: 16px 16px 0px 0px;
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 1000;
			text-align: center;
			padding: 60rpx 30rpx 74rpx;

			.icon {
				width: 70rpx;
				height: 70rpx;
			}

			.modalTitle {
				line-height: 42rpx;
				font-size: 32rpx;
				font-weight: 500;
				color: #333333;
				margin-top: 30rpx;
			}

			.modalContent {
				font-size: 28rpx;
				font-weight: 400;
				color: #333333;
				line-height: 42rpx;
				margin-top: 22rpx;
			}

			.btm {
				display: flex;
				margin-top: 60rpx;
				justify-content: space-between;
				margin-bottom: 20rpx;

				.cancel {
					width: 336rpx;
					height: 108rpx;
					border-radius: 8px;
					border: 2rpx solid #CDCDCD;
					font-size: 32rpx;
					font-weight: 500;
					color: #999999;
					background-color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.determine {
					width: 336rpx;
					height: 108rpx;
					background: linear-gradient(178deg, #FFCE53 0%, #FDD04A 100%);
					border-radius: 8px;
					border-radius: 8px;
					font-size: 32rpx;
					font-weight: 500;
					color: #333333;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}
</style>
